<template>
  <div class="home-container">
    <!-- 导航头部 -->
    <header class="navbar">
      <div class="nav-content">
        <div class="logo">
          <div class="logo-icon">🎭</div>
          <h1>{{ $t('home.title') }}</h1>
          <div class="logo-subtitle">{{ $t('home.subtitle') }}</div>
          </div>
        <nav class="nav-menu">
          <div class="nav-info">
            <span class="beta-tag">{{ $t('home.beta') }}</span>
            <span class="status-dot"></span>
            <span class="status-text">{{ $t('home.online') }}</span>
          </div>
          
          <!-- 主题切换按钮 -->
          <ThemeToggle />
          
          <!-- 语言切换按钮 -->
          <el-dropdown @command="handleLanguageChange" class="language-switcher">
            <el-button text class="language-btn">
              <span class="current-lang-flag">{{ getCurrentLanguageFlag() }}</span>
              <el-icon><ArrowDown /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item 
                  v-for="locale in supportedLocales" 
                  :key="locale.value"
                  :command="locale.value"
                  :class="{ active: currentLanguage === locale.value }"
                >
                  <span class="lang-flag">{{ locale.flag }}</span>
                  <span class="lang-label">{{ locale.label }}</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          
          <el-button 
            type="primary" 
            class="try-btn"
            @click="goToExperience"
          >
            <el-icon class="btn-icon"><ChatDotRound /></el-icon>
            {{ $t('home.tryNow') }}
          </el-button>
        </nav>
      </div>
    </header>
      
    <!-- 英雄区域 -->
    <section class="hero-section">
      <!-- 背景装饰元素 -->
      <div class="hero-bg-decorations">
        <div class="bg-circle bg-circle-1"></div>
        <div class="bg-circle bg-circle-2"></div>
        <div class="bg-circle bg-circle-3"></div>
        <div class="floating-shapes">
          <div class="shape shape-1">🌟</div>
          <div class="shape shape-2">💫</div>
          <div class="shape shape-3">⭐</div>
          <div class="shape shape-4">🌠</div>
          <div class="shape shape-5">✨</div>
          <div class="shape shape-6">🎊</div>
        </div>
      </div>
      
      <div class="hero-content">
        <div class="hero-text">
          <div class="hero-badge">
            <span class="badge-icon">🚀</span>
            <span>{{ $t('home.hero.badge') }}</span>
          </div>
          <h1 class="hero-title">
            {{ $t('home.hero.title') }}
            <span class="highlight-text">{{ $t('home.hero.titleHighlight') }}</span>
          </h1>
          <p class="hero-subtitle">
            {{ $t('home.hero.subtitle') }}
            <br>
            <span class="subtitle-highlight">{{ $t('home.hero.features') }}</span>
          </p>
          <div class="hero-stats">
            <div class="stat-mini">
              <span class="stat-number">8+</span>
              <span class="stat-text">{{ $t('home.hero.stats.characters') }}</span>
            </div>
            <div class="stat-mini">
              <span class="stat-number">Beta</span>
              <span class="stat-text">{{ $t('home.hero.stats.version') }}</span>
            </div>
            <div class="stat-mini">
              <span class="stat-number">AI</span>
              <span class="stat-text">{{ $t('home.hero.stats.ai') }}</span>
            </div>
          </div>
          <div class="hero-actions">
            <el-button 
              type="primary" 
              size="large" 
              class="primary-btn"
              @click="goToExperience"
            >
              <span class="btn-icon">🎯</span>
              {{ $t('home.hero.buttons.experience') }}
            </el-button>
            <el-button 
              size="large" 
              class="secondary-btn"
              @click="scrollToFeatures"
            >
              <span class="btn-icon">📖</span>
              {{ $t('home.hero.buttons.learnMore') }}
            </el-button>
          </div>
        </div>
        <div class="hero-visual">
          <div class="visual-card">
            <div class="card-glow"></div>
            <div class="floating-elements">
              <div class="float-element float-1">💬</div>
              <div class="float-element float-2">🎪</div>
              <div class="float-element float-3">✨</div>
              <div class="float-element float-4">🎨</div>
            </div>
            <div class="card-icon">🎭</div>
            <h3>{{ $t('home.hero.card.title') }}</h3>
            <div class="typing-animation">
              <span class="typing-text">{{ typingText }}</span>
              <span class="cursor">|</span>
            </div>
            <div class="card-features">
              <div class="mini-feature">
                <span class="feature-icon">🎙️</span>
                <span>{{ $t('home.hero.card.voiceInteraction') }}</span>
              </div>
              <div class="mini-feature">
                <span class="feature-icon">🤖</span>
                <span>{{ $t('home.hero.card.aiSmart') }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="scroll-indicator">
        <div class="scroll-arrow" @click="scrollToFeatures">
          <el-icon><ArrowDown /></el-icon>
        </div>
      </div>
    </section>

    <!-- 功能特色 -->
    <section id="features" class="features-section">
      <div class="container">
        <div class="section-header">
          <div class="section-badge">
            <span class="badge-icon">⚡</span>
            <span>{{ $t('home.features.badge') }}</span>
          </div>
          <h2 class="section-title">{{ $t('home.features.title') }}</h2>
          <p class="section-subtitle">{{ $t('home.features.subtitle') }}</p>
        </div>
        
        <div class="features-grid">
          <div class="feature-item">
            <div class="feature-header">
                  <div class="feature-icon">🎭</div>
              <div class="feature-badge">{{ $t('home.features.rolePlay.badge') }}</div>
            </div>
                  <h3>{{ $t('home.features.rolePlay.title') }}</h3>
            <p>{{ $t('home.features.rolePlay.description') }}</p>
            <ul class="feature-list">
              <li v-for="(feature, index) in rolePlayFeatures" :key="index">
                {{ feature }}
              </li>
            </ul>
            <div class="feature-demo">
              <div class="demo-chat">
                <div class="chat-bubble">
                  <span class="chat-icon">👤</span>
                  <span>{{ $t('home.features.rolePlay.demo.user') }}</span>
                </div>
                <div class="chat-bubble ai">
                  <span class="chat-icon">🎭</span>
                  <span>{{ $t('home.features.rolePlay.demo.ai') }}</span>
                </div>
              </div>
            </div>
          </div>

          <div class="feature-item">
            <div class="feature-header">
                  <div class="feature-icon">🎙️</div>
              <div class="feature-badge">{{ $t('home.features.voice.badge') }}</div>
            </div>
                  <h3>{{ $t('home.features.voice.title') }}</h3>
            <p>{{ $t('home.features.voice.description') }}</p>
            <ul class="feature-list">
              <li v-for="(feature, index) in voiceFeatures" :key="index">
                {{ feature }}
              </li>
            </ul>
            <div class="feature-demo">
              <div class="voice-visualizer">
                <div class="voice-bar voice-bar-1"></div>
                <div class="voice-bar voice-bar-2"></div>
                <div class="voice-bar voice-bar-3"></div>
                <div class="voice-bar voice-bar-4"></div>
                <div class="voice-bar voice-bar-5"></div>
              </div>
              <div class="voice-status">
                <span class="status-dot active"></span>
                <span>{{ $t('home.features.voice.status') }}</span>
              </div>
            </div>
          </div>

          <div class="feature-item">
            <div class="feature-header">
                  <div class="feature-icon">🤖</div>
              <div class="feature-badge">{{ $t('home.features.ai.badge') }}</div>
            </div>
                  <h3>{{ $t('home.features.ai.title') }}</h3>
            <p>{{ $t('home.features.ai.description') }}</p>
            <ul class="feature-list">
              <li v-for="(feature, index) in aiFeatures" :key="index">
                {{ feature }}
              </li>
            </ul>
            <div class="feature-demo">
              <div class="ai-thinking">
                <div class="thinking-dots">
                  <span class="dot"></span>
                  <span class="dot"></span>
                  <span class="dot"></span>
                </div>
                <div class="ai-stats">
                  <div class="ai-stat">
                    <span class="stat-label">{{ $t('home.features.ai.stats.understanding') }}</span>
                    <div class="progress-bar">
                      <div class="progress-fill" style="width: 95%"></div>
                    </div>
                  </div>
                  <div class="ai-stat">
                    <span class="stat-label">{{ $t('home.features.ai.stats.responseSpeed') }}</span>
                    <div class="progress-bar">
                      <div class="progress-fill" style="width: 88%"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 产品优势 -->
    <section id="advantages" class="advantages-section">
      <div class="container">
        <div class="advantages-content">
          <div class="advantages-text">
            <h2>{{ $t('home.advantages.title') }}</h2>
            <div class="advantage-item">
              <div class="advantage-icon">⚡</div>
              <div class="advantage-content">
                <h3>{{ $t('home.advantages.efficient.title') }}</h3>
                <p>{{ $t('home.advantages.efficient.description') }}</p>
              </div>
            </div>
            
            <div class="advantage-item">
              <div class="advantage-icon">🎨</div>
              <div class="advantage-content">
                <h3>{{ $t('home.advantages.immersive.title') }}</h3>
                <p>{{ $t('home.advantages.immersive.description') }}</p>
              </div>
            </div>
            
            <div class="advantage-item">
              <div class="advantage-icon">🔒</div>
              <div class="advantage-content">
                <h3>{{ $t('home.advantages.secure.title') }}</h3>
                <p>{{ $t('home.advantages.secure.description') }}</p>
              </div>
            </div>
          </div>
          
          <div class="advantages-visual">
            <div class="visual-stats">
              <div class="stat-item">
                <div class="stat-icon">🎭</div>
                <div class="stat-number" data-target="8">0</div>
                <div class="stat-plus">+</div>
                <div class="stat-label">{{ $t('home.advantages.stats.characterTypes') }}</div>
                <div class="stat-desc">{{ $t('home.advantages.stats.classicNovelCharacters') }}</div>
                <div class="stat-chart">
                  <div class="chart-bar" style="height: 80%"></div>
                </div>
              </div>
              <div class="stat-item">
                <div class="stat-icon">🚀</div>
                <div class="stat-number">Beta</div>
                <div class="stat-label">{{ $t('home.advantages.stats.testVersion') }}</div>
                <div class="stat-desc">{{ $t('home.advantages.stats.continuousUpdates') }}</div>
                <div class="version-indicator">
                  <div class="version-dot active"></div>
                  <div class="version-dot"></div>
                  <div class="version-dot"></div>
                </div>
              </div>
              <div class="stat-item">
                <div class="stat-icon">🤖</div>
                <div class="stat-number">AI</div>
                <div class="stat-label">{{ $t('home.advantages.stats.intelligentChat') }}</div>
                <div class="stat-desc">{{ $t('home.advantages.stats.largeModelDriven') }}</div>
                <div class="ai-indicator">
                  <div class="ai-pulse"></div>
                  <div class="ai-text">{{ $t('home.advantages.stats.intelligentRunning') }}</div>
                </div>
              </div>
            </div>
            
            <!-- 新增数据展示区域 -->
            <div class="data-showcase">
              <div class="data-item">
                <div class="data-icon">📊</div>
                <div class="data-content">
                  <div class="data-title">{{ $t('home.advantages.data.conversationQuality') }}</div>
                  <div class="quality-bars">
                    <div class="quality-bar">
                      <span class="bar-label">{{ $t('home.advantages.data.fluency') }}</span>
                      <div class="bar-fill" style="width: 92%"></div>
                    </div>
                    <div class="quality-bar">
                      <span class="bar-label">{{ $t('home.advantages.data.accuracy') }}</span>
                      <div class="bar-fill" style="width: 89%"></div>
                    </div>
                    <div class="quality-bar">
                      <span class="bar-label">{{ $t('home.advantages.data.emotionalExpression') }}</span>
                      <div class="bar-fill" style="width: 95%"></div>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="data-item">
                <div class="data-icon">⚡</div>
                <div class="data-content">
                  <div class="data-title">{{ $t('home.advantages.data.responseSpeed') }}</div>
                  <div class="speed-meter">
                    <div class="meter-arc">
                      <div class="meter-fill"></div>
                    </div>
                    <div class="meter-text">
                      <span class="speed-value">0.8s</span>
                      <span class="speed-label">{{ $t('home.advantages.data.averageResponse') }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 体验区域 -->
    <section class="experience-section">
      <div class="container">
        <div class="experience-content">
          <h2>{{ $t('home.experience.title') }}</h2>
          <p>{{ $t('home.experience.description') }}</p>
          <el-button 
            type="primary" 
            size="large" 
            class="experience-btn"
            @click="goToExperience"
          >
              <el-icon><ChatDotRound /></el-icon>
              {{ $t('home.experience.startNow') }}
            </el-button>
          </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer id="about" class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-info">
            <h3>Echo Role</h3>
            <p>{{ $t('home.footer.description') }}</p>
          </div>
          <div class="footer-links">
            <div class="link-group">
              <h4>{{ $t('home.footer.aboutProject') }}</h4>
              <p>{{ $t('home.footer.projectDescription') }}</p>
            </div>
          </div>
        </div>
        <div class="footer-bottom">
          <p>{{ $t('home.footer.copyright') }}</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useUserStore } from '../store/modules/user'
import { ArrowDown, ChatDotRound } from '@element-plus/icons-vue'
import ThemeToggle from '../components/common/ThemeToggle.vue'
import { setLocale, getCurrentLocale, supportedLocales, type SupportedLocale } from '../i18n'
import { getCurrentTheme, initTheme } from '../utils/theme'
import { getRouteHistory } from '../router'

const router = useRouter()
const userStore = useUserStore()
const { t } = useI18n()
const typingText = ref('')

// 语言切换相关
const currentLanguage = ref<SupportedLocale>(getCurrentLocale())

// 主题切换已移至 ThemeToggle 组件中统一管理

const texts = computed(() => [
  t('home.hero.card.typingTexts.welcome'),
  t('home.hero.card.typingTexts.chat'),
  t('home.hero.card.typingTexts.experience'),
  t('home.hero.card.typingTexts.explore')
])

const rolePlayFeatures = computed(() => {
  const features = t('home.features.rolePlay.features')
  return Array.isArray(features) ? features : []
})
const voiceFeatures = computed(() => {
  const features = t('home.features.voice.features')
  return Array.isArray(features) ? features : []
})
const aiFeatures = computed(() => {
  const features = t('home.features.ai.features')
  return Array.isArray(features) ? features : []
})

let currentTextIndex = 0
let currentCharIndex = 0
let isDeleting = false

const typeWriter = () => {
  const currentText = texts.value[currentTextIndex]
  
  if (isDeleting) {
    typingText.value = currentText.substring(0, currentCharIndex - 1)
    currentCharIndex--
  } else {
    typingText.value = currentText.substring(0, currentCharIndex + 1)
    currentCharIndex++
  }
  
  let typeSpeed = isDeleting ? 100 : 150
  
  if (!isDeleting && currentCharIndex === currentText.length) {
    typeSpeed = 2000
    isDeleting = true
  } else if (isDeleting && currentCharIndex === 0) {
    isDeleting = false
    currentTextIndex = (currentTextIndex + 1) % texts.value.length
  }
  
  setTimeout(typeWriter, typeSpeed)
}

const goToExperience = () => {
  if (userStore && userStore.isLoggedIn) {
    // 已登录用户，检查是否有历史记录
    const history = getRouteHistory()
    const validRoutes = history.filter(route => 
      !['/login', '/register', '/404', '/'].includes(route) &&
      !route.includes('error')
    )
    
    if (validRoutes.length > 0) {
      // 返回到最后一个有效页面
      router.push(validRoutes[validRoutes.length - 1])
    } else {
      // 没有历史记录，直接进入主页面
      router.push('/main')
    }
  } else {
    // 未登录用户，跳转到登录页面，并保存当前页面作为重定向目标
    router.push({
      path: '/login',
      query: { redirect: '/main' }
    })
  }
}

const scrollToFeatures = () => {
  const element = document.getElementById('features')
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

// 语言切换方法
const handleLanguageChange = (locale: SupportedLocale) => {
  currentLanguage.value = locale
  setLocale(locale)
}

const getCurrentLanguageFlag = () => {
  const current = supportedLocales.find(locale => locale.value === currentLanguage.value)
  return current?.flag || '🌐'
}

// 主题切换逻辑已移至 ThemeToggle 组件

// 数字动画函数
const animateNumber = (element: HTMLElement, target: number, duration: number = 2000) => {
  const start = 0
  const startTime = performance.now()
  
  const updateNumber = (currentTime: number) => {
    const elapsed = currentTime - startTime
    const progress = Math.min(elapsed / duration, 1)
    
    const current = Math.floor(start + (target - start) * progress)
    element.textContent = current.toString()
    
    if (progress < 1) {
      requestAnimationFrame(updateNumber)
    }
  }
  
  requestAnimationFrame(updateNumber)
}

// 观察器用于触发动画
const observeElements = () => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const element = entry.target as HTMLElement
        const target = parseInt(element.dataset.target || '0')
        if (target > 0) {
          animateNumber(element, target)
        }
        observer.unobserve(element)
      }
    })
  }, {
    threshold: 0.5
  })
  
  // 观察数字元素
  const numberElements = document.querySelectorAll('[data-target]')
  numberElements.forEach(el => observer.observe(el))
}

onMounted(() => {
  typeWriter()
  setTimeout(observeElements, 1000) // 延迟执行，确保DOM完全加载
  
  // 确保主题正确初始化
  const currentTheme = getCurrentTheme()
  console.log('Home页面: 当前主题为', currentTheme)
  
  // 强制触发一次主题应用，确保导航栏样式正确
  setTimeout(() => {
    const isDark = document.documentElement.classList.contains('dark')
    console.log('Home页面: DOM是否包含dark类:', isDark)
    console.log('Home页面: 导航栏元素:', document.querySelector('.navbar'))
  }, 500)
  
  // 主题切换功能已移至 ThemeToggle 组件统一管理
})
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background: var(--background);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 导航栏 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  padding: 0 20px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.navbar:hover {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* 深色模式下的导航栏 */
:global(.dark .navbar) {
  background: rgba(15, 23, 42, 0.95) !important;
  border-bottom-color: var(--border) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important;
}

:global(.dark .navbar:hover) {
  background: rgba(15, 23, 42, 0.98) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6) !important;
}

/* 深色模式下的logo样式 */
:global(.dark .logo h1) {
  color: var(--text-primary) !important;
}

:global(.dark .logo-subtitle) {
  color: var(--text-secondary) !important;
}

/* 深色模式下的导航菜单样式 */
:global(.dark .nav-info) {
  background: rgba(102, 126, 234, 0.15) !important;
  border-color: rgba(102, 126, 234, 0.25) !important;
}

:global(.dark .beta-tag) {
  background: rgba(102, 126, 234, 0.3) !important;
  color: #a5b4fc !important;
}

:global(.dark .status-text) {
  color: var(--text-secondary) !important;
}

:global(.dark .status-dot) {
  background: #10b981 !important;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6) !important;
}

/* 深色模式下的语言切换按钮 */
:global(.dark .language-btn) {
  color: var(--text-secondary) !important;
}

:global(.dark .language-btn:hover) {
  color: var(--primary-color) !important;
}

/* 深色模式下的尝试体验按钮 */
:global(.dark .try-btn) {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

:global(.dark .try-btn:hover) {
  background: var(--primary-light) !important;
  border-color: var(--primary-light) !important;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5) !important;
}

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.logo-icon {
  font-size: 32px;
  animation: logoFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.3));
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(5deg); }
}

.logo h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(102, 126, 234, 0.1);
}

.logo-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  position: absolute;
  bottom: -18px;
  left: 44px;
  opacity: 0.8;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(102, 126, 234, 0.05);
  border-radius: 20px;
  border: 1px solid rgba(102, 126, 234, 0.1);
}


.beta-tag {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse 2s infinite;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.status-text {
  font-size: 12px;
  color: var(--success);
  font-weight: 500;
}

/* 语言切换按钮样式 */
.language-switcher .language-btn {
  color: var(--text-secondary);
  transition: all 0.3s ease;
  padding: 8px 12px;
  border-radius: 8px;
}

.language-switcher .language-btn:hover {
  color: var(--primary-color);
  background: rgba(102, 126, 234, 0.1);
}


.try-btn {
  padding: 12px 28px;
  border-radius: 25px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.try-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.try-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.try-btn:hover::before {
  left: 100%;
}

.btn-icon {
  margin-right: 6px;
  animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* 英雄区域 */
.hero-section {
  padding: 120px 20px 80px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
}

/* 英雄区域背景装饰 */
.hero-bg-decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.bg-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  animation: circleFloat 8s ease-in-out infinite;
}

.bg-circle-1 {
  width: 200px;
  height: 200px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.bg-circle-2 {
  width: 150px;
  height: 150px;
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}

.bg-circle-3 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  left: 20%;
  animation-delay: 4s;
}

@keyframes circleFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.05; }
  50% { transform: translate(20px, -30px) scale(1.1); opacity: 0.1; }
}

.floating-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
}

.shape {
  position: absolute;
  font-size: 20px;
  opacity: 0.7;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.shape-1 { top: 15%; left: 20%; animation: shapeFloat1 6s infinite; }
.shape-2 { top: 25%; right: 25%; animation: shapeFloat2 6s infinite 1s; }
.shape-3 { top: 45%; left: 15%; animation: shapeFloat3 6s infinite 2s; }
.shape-4 { top: 65%; right: 20%; animation: shapeFloat1 6s infinite 3s; }
.shape-5 { bottom: 25%; left: 25%; animation: shapeFloat2 6s infinite 4s; }
.shape-6 { bottom: 15%; right: 15%; animation: shapeFloat3 6s infinite 5s; }

@keyframes shapeFloat1 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes shapeFloat2 {
  0%, 100% { transform: translateX(0px) scale(1); }
  50% { transform: translateX(15px) scale(1.2); }
}

@keyframes shapeFloat3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(10px, -10px) rotate(-180deg); }
}

.hero-content {
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 2;
}

/* 英雄区域新增元素样式 */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: badgeGlow 3s ease-in-out infinite;
}

@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.1); }
  50% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.2); }
}

.badge-icon {
  font-size: 16px;
  animation: iconRotate 4s linear infinite;
}

@keyframes iconRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.highlight-text {
  background: linear-gradient(45deg, #FFD700, #FFA500, #FF6B6B, #4ECDC4);
  background-size: 400% 400%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.subtitle-highlight {
  display: block;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
  opacity: 0.9;
}

.hero-stats {
  display: flex;
  gap: 24px;
  margin: 30px 0;
}

.stat-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.stat-mini:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
}

.stat-mini .stat-number {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
}

.stat-mini .stat-text {
  font-size: 12px;
  opacity: 0.8;
}

.btn-icon {
  margin-right: 8px;
  font-size: 16px;
}

.card-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #667eea, #764ba2, #667eea);
  border-radius: 22px;
  z-index: -1;
  opacity: 0.7;
  animation: glowRotate 4s linear infinite;
}

@keyframes glowRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.card-features {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.mini-feature {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  font-size: 12px;
  transition: all 0.3s ease;
}

.mini-feature:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.feature-icon {
  font-size: 14px;
}

.hero-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
}

.hero-subtitle {
  font-size: 20px;
  line-height: 1.6;
  opacity: 0.9;
  margin-bottom: 40px;
}

.hero-actions {
  display: flex;
  gap: 16px;
}

.primary-btn {
  padding: 16px 32px;
  font-size: 16px;
  border-radius: 30px;
  background: white;
  color: #667eea;
  border: none;
}

.secondary-btn {
  padding: 16px 32px;
  font-size: 16px;
  border-radius: 30px;
  background: transparent;
  color: white;
  border: 2px solid white;
}

.hero-visual {
  display: flex;
  justify-content: center;
}

.visual-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  animation: cardFloat 6s ease-in-out infinite;
}

@keyframes cardFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-10px) rotate(1deg); }
  66% { transform: translateY(5px) rotate(-1deg); }
}

.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.float-element {
  position: absolute;
  font-size: 24px;
  opacity: 0.6;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.float-1 {
  top: 20%;
  left: 10%;
  animation-name: float1;
  animation-delay: 0s;
}

.float-2 {
  top: 60%;
  right: 15%;
  animation-name: float2;
  animation-delay: 1s;
}

.float-3 {
  top: 30%;
  right: 20%;
  animation-name: float3;
  animation-delay: 2s;
}

.float-4 {
  bottom: 30%;
  left: 20%;
  animation-name: float4;
  animation-delay: 3s;
}

@keyframes float1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.6; }
  50% { transform: translate(10px, -15px) rotate(180deg); opacity: 0.8; }
}

@keyframes float2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.6; }
  50% { transform: translate(-15px, 10px) rotate(-180deg); opacity: 0.8; }
}

@keyframes float3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  50% { transform: translate(8px, -8px) scale(1.2); opacity: 0.9; }
}

@keyframes float4 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.6; }
  50% { transform: translate(-10px, -12px) rotate(90deg); opacity: 0.8; }
}

.card-icon {
  font-size: 60px;
  margin-bottom: 20px;
  animation: iconPulse 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.3));
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.typing-animation {
  margin-top: 16px;
  font-size: 14px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}

.typing-text {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.cursor {
  color: rgba(255, 255, 255, 0.9);
  animation: blink 1s infinite;
  margin-left: 2px;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}

.scroll-arrow {
  cursor: pointer;
  font-size: 24px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* 通用容器 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 功能特色 */
.features-section {
  padding: 100px 0;
  background: var(--background);
  transition: background-color 0.3s ease;
}

.section-header {
  text-align: center;
  margin-bottom: 80px;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}

.feature-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.feature-badge {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.feature-demo {
  margin-top: 24px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
}

/* 聊天演示样式 */
.demo-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-bubble {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  max-width: 80%;
}

.chat-bubble:first-child {
  background: #667eea;
  color: white;
  align-self: flex-end;
}

.chat-bubble.ai {
  background: var(--surface);
  color: var(--text-secondary);
  align-self: flex-start;
}

.chat-icon {
  font-size: 16px;
}

/* 语音可视化样式 */
.voice-visualizer {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 4px;
  height: 60px;
  margin-bottom: 16px;
}

.voice-bar {
  width: 4px;
  background: linear-gradient(to top, #667eea, #764ba2);
  border-radius: 2px;
  animation: voiceWave 1.5s ease-in-out infinite;
}

.voice-bar-1 { height: 20px; animation-delay: 0s; }
.voice-bar-2 { height: 40px; animation-delay: 0.1s; }
.voice-bar-3 { height: 60px; animation-delay: 0.2s; }
.voice-bar-4 { height: 35px; animation-delay: 0.3s; }
.voice-bar-5 { height: 25px; animation-delay: 0.4s; }

@keyframes voiceWave {
  0%, 100% { transform: scaleY(0.5); opacity: 0.7; }
  50% { transform: scaleY(1.2); opacity: 1; }
}

.voice-status {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-size: 14px;
  color: var(--text-muted);
}

.status-dot.active {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* AI思考样式 */
.ai-thinking {
  text-align: center;
}

.thinking-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
}

.dot {
  width: 8px;
  height: 8px;
  background: #667eea;
  border-radius: 50%;
  animation: thinkingDots 1.4s ease-in-out infinite both;
}

.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
.dot:nth-child(3) { animation-delay: 0s; }

@keyframes thinkingDots {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
  40% { transform: scale(1.2); opacity: 1; }
}

.ai-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.stat-label {
  color: var(--text-muted);
  font-weight: 500;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  margin-left: 12px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 3px;
  animation: progressFill 2s ease-in-out infinite;
}

@keyframes progressFill {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0%); }
}

.section-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: 18px;
  color: var(--text-secondary);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
}

.feature-item {
  background: var(--surface);
  padding: 40px 30px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(50px);
  animation: fadeInUp 0.6s ease forwards;
}

/* 深色模式下的功能卡片 */
:global(.dark) .feature-item {
  background: var(--surface);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.feature-item:nth-child(1) { animation-delay: 0.1s; }
.feature-item:nth-child(2) { animation-delay: 0.2s; }
.feature-item:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
  transition: left 0.5s;
}

.feature-item:hover::before {
  left: 100%;
}

.feature-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 50px rgba(102, 126, 234, 0.2);
}

.feature-icon {
  font-size: 48px;
  margin-bottom: 24px;
}

.feature-item h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.feature-item p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  color: var(--text-secondary);
  padding: 8px 0;
  position: relative;
  padding-left: 20px;
}

.feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: bold;
}

/* 产品优势 */
.advantages-section {
  padding: 100px 0;
  background: var(--surface);
  transition: background-color 0.3s ease;
}

.advantages-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.advantages-text h2 {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 40px;
}

.advantage-item {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
}

.advantage-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.advantage-content h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.advantage-content p {
  color: var(--text-secondary);
  line-height: 1.6;
}

.visual-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.stat-item {
  text-align: center;
  padding: 30px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  opacity: 0;
  transform: scale(0.8);
  animation: scaleIn 0.6s ease forwards;
}

.stat-icon {
  font-size: 32px;
  margin-bottom: 12px;
  display: block;
  animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

.stat-plus {
  display: inline;
  font-size: 24px;
  font-weight: 700;
  opacity: 0.8;
}

.stat-desc {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 8px;
}

.stat-chart {
  margin-top: 16px;
  height: 40px;
  display: flex;
  align-items: end;
  justify-content: center;
}

.chart-bar {
  width: 60px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px 4px 0 0;
  animation: chartGrow 2s ease-out;
}

@keyframes chartGrow {
  0% { height: 0%; }
  100% { height: 80%; }
}

.version-indicator {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}

.version-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.version-dot.active {
  background: rgba(255, 255, 255, 0.9);
  animation: versionPulse 2s ease-in-out infinite;
}

@keyframes versionPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.ai-indicator {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ai-pulse {
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  position: relative;
  animation: aiPulse 2s ease-in-out infinite;
}

.ai-pulse::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  animation: aiRipple 2s ease-in-out infinite;
}

@keyframes aiPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes aiRipple {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

.ai-text {
  font-size: 11px;
  opacity: 0.9;
}

/* 数据展示区域 */
.data-showcase {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.data-item {
  background: var(--background);
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 16px;
  transition: all 0.3s ease;
}

/* 深色模式下的数据项 */
:global(.dark) .data-item {
  background: var(--background);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.data-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.data-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.data-content {
  flex: 1;
}

.data-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.quality-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quality-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bar-label {
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 50px;
}

.bar-fill {
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 2px;
  animation: barFill 2s ease-out;
}

@keyframes barFill {
  0% { width: 0% !important; }
}

.speed-meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.meter-arc {
  width: 80px;
  height: 40px;
  border: 4px solid #e2e8f0;
  border-bottom: none;
  border-radius: 80px 80px 0 0;
  position: relative;
  overflow: hidden;
}

.meter-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 80px 80px 0 0;
  animation: meterFill 2s ease-out;
}

@keyframes meterFill {
  0% { width: 0%; }
  100% { width: 70%; }
}

.meter-text {
  text-align: center;
}

.speed-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-color);
}

.speed-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.stat-item:nth-child(1) { animation-delay: 0.1s; }
.stat-item:nth-child(2) { animation-delay: 0.2s; }
.stat-item:nth-child(3) { animation-delay: 0.3s; }

@keyframes scaleIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.stat-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.stat-item:hover::before {
  width: 200px;
  height: 200px;
}

.stat-item:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.stat-number {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
}

/* 体验区域 */
.experience-section {
  padding: 100px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.experience-content {
  text-align: center;
}

.experience-content h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 16px;
}

.experience-content p {
  font-size: 18px;
  opacity: 0.9;
  margin-bottom: 40px;
}

.experience-btn {
  padding: 16px 32px;
  font-size: 16px;
  border-radius: 30px;
  background: white;
  color: #667eea;
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
  animation: btnGlow 2s ease-in-out infinite alternate;
}

@keyframes btnGlow {
  0% { box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3), 0 0 0 0 rgba(255, 255, 255, 0.7); }
  100% { box-shadow: 0 6px 20px rgba(255, 255, 255, 0.5), 0 0 0 10px rgba(255, 255, 255, 0); }
}

.experience-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent);
  transition: left 0.5s;
}

.experience-btn:hover::before {
  left: 100%;
}

.experience-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4);
}

/* 页脚 */
.footer {
  background: #1a202c;
  color: white;
  padding: 60px 0 20px;
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 40px;
}

.footer-info h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
}

.footer-info p {
  color: #a0aec0;
  line-height: 1.6;
}

.footer-links {
  display: flex;
  justify-content: flex-start;
}

.link-group h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

.link-group p {
  color: #a0aec0;
  line-height: 1.6;
  margin: 0;
}

.footer-bottom {
  border-top: 1px solid #2d3748;
  padding-top: 20px;
  text-align: center;
}

.footer-bottom p {
  color: #a0aec0;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-content,
  .advantages-content,
  .footer-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .hero-title {
    font-size: 36px;
  }
  
  .section-title {
    font-size: 28px;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .nav-menu {
    gap: 15px;
  }
  
  .nav-link {
    display: none;
  }
  
  .theme-toggle-btn {
    order: -1; /* 让主题切换按钮在移动端也显示，并排在最前面 */
  }
}

/* 主题切换按钮样式 */
.theme-toggle-btn {
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid rgba(102, 126, 234, 0.1);
  backdrop-filter: blur(10px);
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  color: var(--primary-color);
  transform: scale(1.05);
  border-color: rgba(102, 126, 234, 0.3);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.theme-toggle-btn .el-icon {
  font-size: 18px;
}

/* 深色模式下的主题切换按钮 */
:global(.dark) .theme-toggle-btn {
  background: transparent;
  border-color: rgba(102, 126, 234, 0.2);
  color: var(--text-secondary);
}

:global(.dark) .theme-toggle-btn:hover {
  background: rgba(102, 126, 234, 0.2);
  border-color: rgba(102, 126, 234, 0.4);
  color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(129, 140, 248, 0.3);
}

/* 深色主题下的特殊样式调整 */
:global(.dark) .home-container {
  background: var(--background);
  color: var(--text-primary);
}

:global(.dark) .hero-section {
  /* 保持英雄区域的渐变背景 */
  background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%);
}

:global(.dark) .footer {
  background: #0f172a;
}

/* 深色主题下的卡片样式已通过上面的具体样式规则处理 */
</style> 